<template>
    <div>
数据统计
    </div>

    <div>
    <!-- 创建大容器容纳左右两个区 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">1
        <Ip>
            <!-- 插入槽口 -->
            <template #main>
                <ItemOne></ItemOne>
            </template>
        </Ip>
        <Ip></Ip>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">3
        <Ip></Ip>
        <Ip></Ip>
      </section>
    </section>
  </div>
</template>

<script setup lang="ts">
// 插入插槽
import Ip from '../components/ItemPage.vue'
// 引入插槽四个小组件
import ItemOne from '../components/itemOne.vue'
</script>

<style lang="scss" scoped>
// 主体容器样式
.container {
  // 这里就不需要设置使用rem了 使用rem那么页面就会根据html根结点大小改变而改变了
  width: 100%;
  margin: 0 auto;
  background-color: gray;
  display: flex;

   // 设置左中右的占比 但是不要忘了在父容器要设置flex
   .itemLeft,
  .itemRight {
    flex: 1;
  }
}
</style>